<!--
 * @Description: 
 * @Author: 阳婷
 * @Date: 2021-03-26 09:18:24
 * @LastEditTime: 2022-08-29 14:12:28
 * @LastEditors: 阳婷
-->
<template>
    <div class="chart-dom-7" ref="chartDom"></div>
</template>

<script>
    import {
        ref,
        shallowRef,
        reactive,
        watch,
        computed,
        PropType,
        defineComponent,
        onMounted,
        onBeforeUnmount,
    } from "vue";
    import * as echarts from "echarts";
    export default defineComponent({
        name: "block_1",
        props: ["modelValue"],
        setup(props) {
            const chartDom = shallowRef();
            const chart = shallowRef();
            var option = props.modelValue
            const resizeFn7 = () => {
                chart.value.resize();
            };
            const resizeChart = () => {
                window.addEventListener("resize", resizeFn7, { passive: false });
            };
            const initComponent = () => {
                chart.value = echarts.init(chartDom.value);
                chart.value.setOption(option, true);
                resizeChart();
            };
            const refreshChart = () => {
                chart.value.setOption(option, true);
            };
            onMounted(() => {
                initComponent();
            });
            onBeforeUnmount(() => {
                window.removeEventListener("resize", resizeFn7);
            });
            return { chartDom, chart, resizeFn7, refreshChart };
        },
        activated() {
            this.resizeFn7()
        }
    });
</script>